import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import { Form, Icon, Row, Col, DatePicker, Spin } from 'antd'
import Chart from './com/chart'
import PropTypes from 'prop-types'

import Style from './index.css'
import moment from 'moment'

const { RangePicker } = DatePicker
class Index extends Component {
  static propTypes = {
    router: PropTypes.any,
    getAllOrder: PropTypes.func,
    allOrder: PropTypes.any,
    getTradeUser: PropTypes.func,
    getGoods: PropTypes.func,
    goods: PropTypes.any,
    tradeUser: PropTypes.any,
    getOrderSale: PropTypes.func,
    orderSale: PropTypes.any,
    getOrder: PropTypes.func,
    getMur: PropTypes.func,
    getMut: PropTypes.func,
    getSaleData: PropTypes.func,
    mutData: PropTypes.any,
    murData: PropTypes.any,
    saleData: PropTypes.any,
    order: PropTypes.any
  }
  constructor (props) {
    super(props)
    this.state = {
      orderKey: '本周',
      saleKey: '本周',
      murKey: '本周',
      tab: [{
        key: '今日',
        value: '今日'
      }, {
        key: '本周',
        value: '本周'
      }, {
        key: '本月',
        value: '本月'
      }],
      entrancce: [{
        title: '用户管理',
        type: 'usergroup-delete',
        path: '/users/manage/list'
      }, {
        title: '添加场景',
        type: 'plus-square',
        path: '/scenes/add'
      }, {
        title: '添加商品',
        type: 'plus-circle',
        path: '/goods/add'
      }, {
        title: '订单列表',
        type: 'file-done',
        path: '/order/list'
      }, {
        title: '商品列表',
        type: 'appstore',
        path: '/goods/list'
      }, {
        title: 'banner管理',
        type: 'picture',
        path: '/operation/banner'
      }, {
        title: '动态管理',
        type: 'fund',
        path: ''
      }, {
        title: '交易统计',
        type: 'bar-chart',
        path: ''
      }],
      startTime: moment().format('YYYY-MM-DD HH:mm:ss'),
      endTime: moment().format('YYYY-MM-DD HH:mm:ss')
    }
    this.handleEntrance = this.handleEntrance.bind(this)
    this.murDateChange = this.murDateChange.bind(this)
    this.mutDateChange = this.mutDateChange.bind(this)
    this.orderDateChange = this.orderDateChange.bind(this)
    this.saleOrderDateChange = this.saleOrderDateChange.bind(this)
  }

  handleEntrance (path) {
    window.location.href = path
  }

  murDateChange (start, end) {
    this.props.getMur({
      startTime: end[0],
      endTime: end[1]
    })
  }
  mutDateChange (start, end) {
    this.props.getMut({
      startTime: end[0],
      endTime: end[1]
    })
  }
  orderDateChange (start, end) {
    this.props.getOrder({
      startTime: end[0],
      endTime: end[1]
    })
  }
  saleOrderDateChange (start, end) {
    this.props.getSaleData({
      startTime: end[0],
      endTime: end[1]
    })
  }

  isDown (value) {
    if (/-/.test(value)) {
      return true
    }

    return false
  }

  toOrder (status) {
    window.location.href = `/order/list?status=${status}`
  }

  componentDidMount () {
    const { startTime, endTime } = this.state
    const { getAllOrder, getGoods, getTradeUser, getOrderSale, getMut, getMur, getSaleData, getOrder } = this.props
    getAllOrder()
    getGoods()
    getTradeUser()
    getOrderSale()
    getMut({
      startTime,
      endTime
    })
    getMur({
      startTime,
      endTime
    })
    getSaleData({
      startTime,
      endTime
    })
    getOrder({
      startTime,
      endTime
    })
  }

  render () {
    // , tab, saleKey, orderKey, murKey
    const { entrancce } = this.state
    const { allOrder, goods, tradeUser, orderSale, murData, mutData, order, saleData } = this.props
    return (
      <>
        <Spin spinning={!orderSale}>
          <div className={Style['header']}>
            <div className={`${Style['header-card']} ${Style['first']}`}>
              <Icon type='file-done' className={Style['icon']} />
              <div className={Style['title-amount']}>
                <div className={Style['title']}>今日订单总数</div>
                <div className={Style['amount']}>{orderSale && orderSale.todayOrderCount}</div>
              </div>
            </div>
            <div className={`${Style['header-card']} ${Style['second']}`}>
              <Icon type='pay-circle' className={Style['icon']} />
              <div className={Style['title-amount']}>
                <div className={Style['title']}>今日销售总额</div>
                <div className={Style['amount']}>¥{orderSale && (orderSale.todayTotalSales / 100)}</div>
              </div>
            </div>
            <div className={`${Style['header-card']} ${Style['third']}`}>
              <Icon type='database' className={Style['icon']} />
              <div className={Style['title-amount']}>
                <div className={Style['title']}>昨日销售总额</div>
                <div className={Style['amount']}>¥{orderSale && (orderSale.yesterdayTotalSales / 100)}</div>
              </div>
            </div>
            <div className={`${Style['header-card']} ${Style['fourth']}`}>
              <Icon type='line-chart' className={Style['icon']} />
              <div className={Style['title-amount']}>
                <div className={Style['title']}>近7天销售总额</div>
                <div className={Style['amount']}>¥{orderSale && (orderSale.nearlySevenDaysTotalSales / 100)}</div>
              </div>
            </div>
          </div>
          <div className={Style['container']}>
            <div className={`${Style['conten-container']} ${Style['pending-info']}`}>
              <div className={Style['conten-title']}>待处理事物</div>
              <div className={Style['pending-data']}>
                <div className={Style['pending-data']}>
                  <div className={Style['pending-item']} onClick={() => this.toOrder('0')}>
                    <div>待支付订单</div>
                    <div>(<span>{allOrder.unPaidCount}</span>)</div>
                  </div>
                  <div className={Style['pending-item']} onClick={() => this.toOrder('10')}>
                    <div>待发货订单</div>
                    <div>(<span>{allOrder.paidCount}</span>)</div>
                  </div>
                  <div className={Style['pending-item']} onClick={() => this.toOrder('20')}>
                    <div>已发货订单</div>
                    <div>(<span>{allOrder.sendOutCount}</span>)</div>
                  </div>
                  <div className={Style['pending-item']} onClick={() => this.toOrder('50')}>
                    <div>待处理退款订单</div>
                    <div>(<span>{allOrder.refundRequestCount}</span>)</div>
                  </div>
                </div>
              </div>
            </div>
            <div className={Style['conten-container']}>
              <div className={Style['conten-title']}>运营快捷入口</div>
              <div className={Style['entrance-container']}>
                {
                  entrancce && entrancce.map((item, index) => {
                    return <div className={Style['entrance']} key={index} onClick={() => this.handleEntrance(item.path)}>
                      <Icon type={item.type} className={`${Style['entrance-icon']}`} />
                      <div>{item.title}</div>
                    </div>
                  })
                }
              </div>
            </div>
            <div className={Style['card-container']}>
              <Row gutter={24}>
                <Col className='gutter-row' span={12}>
                  <div className={Style['conten-container']}>
                    <div className={Style['conten-title']}>商品总览</div>
                    <div className={Style['amount-container']}>
                      <div className={Style['conten-amount-container']}>
                        <div className={Style['conten-amount']}>{goods.allCommodityCount}</div>
                        <div className={Style['conten-label']}>全部商品</div>
                      </div>
                      <div className={Style['conten-amount-container']}>
                        <div className={Style['conten-amount']}>{goods.putAwayCount}</div>
                        <div className={Style['conten-label']}>已上架</div>
                      </div>
                      <div className={Style['conten-amount-container']}>
                        <div className={Style['conten-amount']}>{goods.putUpCount}</div>
                        <div className={Style['conten-label']}>已下架</div>
                      </div>
                      <div className={Style['conten-amount-container']}>
                        <div className={Style['conten-amount']}>{goods.noStockCount}</div>
                        <div className={Style['conten-label']}>无库存</div>
                      </div>
                    </div>
                  </div>
                </Col>
                <Col className='gutter-row' span={12}>
                  <div className={Style['conten-container']}>
                    <div className={Style['conten-title']}>交易用户总览</div>
                    <div className={Style['amount-container']}>
                      <div className={Style['conten-amount-container']}>
                        <div className={Style['conten-amount']}>{tradeUser.allUserCount}</div>
                        <div className={Style['conten-label']}>总用户数</div>
                      </div>
                      <div className={Style['conten-amount-container']}>
                        <div className={Style['conten-amount']}>{tradeUser.thisWeekNewCount}</div>
                        <div className={Style['conten-label']}>本周新增数</div>
                      </div>
                      <div className={Style['conten-amount-container']}>
                        <div className={Style['conten-amount']}>{tradeUser.thisMonthNewCount}</div>
                        <div className={Style['conten-label']}>本月新增数</div>
                      </div>
                      <div className={Style['conten-amount-container']}>
                        <div className={Style['conten-amount']}>{tradeUser.payLevelCount}</div>
                        <div className={Style['conten-label']}>付费会员数</div>
                      </div>
                    </div>
                  </div>
                </Col>
              </Row>
            </div>
            <div className={Style['conten-container']}>
              <div className={Style['conten-title']}>订单统计</div>
              <div className={Style['chart']}>
                <div className={Style['left']}>
                  <div className={Style['month']}>
                    <div className={Style['title']}>本月订单总数</div>
                    <div className={Style['amount']}>{order.monthCount}</div>
                    <div className={Style['des']}><span className={Style[`${this.isDown(order.monthPercentage) ? 'down' : 'up'}`]}>{this.isDown(order.monthPercentage) ? order.monthPercentage : `+${order.monthPercentage}` }</span> 同比上月</div>
                  </div>
                  <div className={Style['week']}>
                    <div className={Style['title']}>本周订单总数</div>
                    <div className={Style['amount']}>{order.weekCount}</div>
                    <div className={Style['des']}><span className={Style[`${this.isDown(order.weekPercentage) ? 'down' : 'up'}`]}>{this.isDown(order.weekPercentage) ? order.weekPercentage : `+${order.weekPercentage}` }</span> 同比上周</div>
                  </div>
                </div>
                <div className={Style['chart-container']}>
                  <div className={Style['chart-header']}>
                    <div className={Style['chart-header-title']} />
                    <div className={Style['right']}>
                      {/* <div className={Style['tab-container']}>
                      {tab.map((item, index) => <div className={`${Style['tab']} ${item.value === orderKey && Style['active']}`} key={index}>{item.value}</div>)}
                    </div> */}
                      <RangePicker style={{ width: '400px' }} defaultValue={[moment(new Date()), moment(new Date())]} onChange={this.orderDateChange} format='YYYY-MM-DD' />
                    </div>
                  </div>
                  <Chart data={order.statistucalList || []} unkey='order' color='#1890FF' />
                </div>
              </div>
            </div>
            <div className={Style['conten-container']}>
              <div className={Style['conten-title']}>销售统计</div>
              <div className={Style['chart']}>
                <div className={Style['left']}>
                  <div className={Style['month']}>
                    <div className={Style['title']}>本月销售总数</div>
                    <div className={Style['amount']}>{saleData.monthCount / 100}</div>
                    <div className={Style['des']}><span className={Style[`${this.isDown(saleData.monthPercentage) ? 'down' : 'up'}`]}>{this.isDown(saleData.monthPercentage) ? saleData.monthPercentage : `+${saleData.monthPercentage}` }</span> 同比上月</div>
                  </div>
                  <div className={Style['week']}>
                    <div className={Style['title']}>本周销售总数</div>
                    <div className={Style['amount']}>{saleData.weekCount / 100}</div>
                    <div className={Style['des']}><span className={Style[`${this.isDown(saleData.weekPercentage) ? 'down' : 'up'}`]}>{this.isDown(saleData.weekPercentage) ? saleData.weekPercentage : `+${saleData.weekPercentage}` }</span> 同比上周</div>
                  </div>
                </div>
                <div className={Style['chart-container']}>
                  <div className={Style['chart-header']}>
                    <div className={Style['chart-header-title']} />
                    <div className={Style['right']}>
                      {/* <div className={Style['tab-container']}>
                      {tab.map((item, index) => <div className={`${Style['tab']} ${item.value === saleKey && Style['active']}`} key={index}>{item.value}</div>)}
                    </div> */}
                      <RangePicker style={{ width: '400px' }} defaultValue={[moment(new Date()), moment(new Date())]} onChange={this.saleOrderDateChange} format='YYYY-MM-DD' />
                    </div>
                  </div>
                  <Chart data={saleData.statistucalList || []} unkey='sale' color='#9270CA' />
                </div>
              </div>
            </div>
            <div className={Style['conten-container']}>
              <div className={Style['conten-title']}>Mur统计</div>
              <div className={Style['chart']}>
                <div className={Style['left']}>
                  <div className={Style['month']}>
                    <div className={Style['title']}>本月Mur总数</div>
                    <div className={Style['amount']}>{murData.monthCount}</div>
                    <div className={Style['des']}><span className={Style[`${this.isDown(murData.monthPercentage) ? 'down' : 'up'}`]}>{this.isDown(murData.monthPercentage) ? murData.monthPercentage : `+${murData.monthPercentage}` }</span> 同比上月</div>
                  </div>
                  <div className={Style['week']}>
                    <div className={Style['title']}>本周Mur总数</div>
                    <div className={Style['amount']}>{murData.weekCount}</div>
                    <div className={Style['des']}><span className={Style[`${this.isDown(murData.weekPercentage) ? 'down' : 'up'}`]}>{this.isDown(murData.weekPercentage) ? murData.weekPercentage : `+${murData.weekPercentage}` }</span> 同比上周</div>
                  </div>
                </div>
                <div className={Style['chart-container']}>
                  <div className={Style['chart-header']}>
                    <div className={Style['chart-header-title']} />
                    <div className={Style['right']}>
                      {/* <div className={Style['tab-container']}>
                      {tab.map((item, index) => <div className={`${Style['tab']} ${item.value === murKey && Style['active']}`} key={index}>{item.value}</div>)}
                    </div> */}
                      <RangePicker style={{ width: '400px' }} defaultValue={[moment(new Date()), moment(new Date())]} onChange={this.murDateChange} format='YYYY-MM-DD' />
                    </div>
                  </div>
                  <Chart data={murData.statistucalList || []} unkey='mur' color='#E8684A' />
                </div>
              </div>
            </div>
            <div className={Style['conten-container']}>
              <div className={Style['conten-title']}>Mut统计</div>
              <div className={Style['chart']}>
                <div className={Style['left']}>
                  <div className={Style['month']}>
                    <div className={Style['title']}>本月Mut总数</div>
                    <div className={Style['amount']}>{mutData.monthCount}</div>
                    <div className={Style['des']}><span className={Style[`${this.isDown(mutData.monthPercentage) ? 'down' : 'up'}`]}>{this.isDown(mutData.monthPercentage) ? mutData.monthPercentage : `+${mutData.monthPercentage}` }</span> 同比上月</div>
                  </div>
                  <div className={Style['week']}>
                    <div className={Style['title']}>本周Mut总数</div>
                    <div className={Style['amount']}>{mutData.weekCount}</div>
                    <div className={Style['des']}><span className={Style[`${this.isDown(mutData.weekPercentage) ? 'down' : 'up'}`]}>{this.isDown(mutData.weekPercentage) ? mutData.weekPercentage : `+${mutData.weekPercentage}` }</span> 同比上周</div>
                  </div>
                </div>
                <div className={Style['chart-container']}>
                  <div className={Style['chart-header']}>
                    <div className={Style['chart-header-title']} />
                    <div className={Style['right']}>
                      {/* <div className={Style['tab-container']}>
                      {tab.map((item, index) => <div className={`${Style['tab']} ${item.value === murKey && Style['active']}`} key={index}>{item.value}</div>)}
                    </div> */}
                      <RangePicker style={{ width: '400px' }} defaultValue={[moment(new Date()), moment(new Date())]} onChange={this.mutDateChange} format='YYYY-MM-DD' />
                    </div>
                  </div>
                  <Chart data={mutData.statistucalList || []} unkey='mut' color='#F6BD16' />
                </div>
              </div>
            </div>
          </div>
        </Spin>
      </>
    )
  }
}

const mapState = state => ({
  allOrder: state.home.allOrder || {},
  goods: state.home.goods || {},
  tradeUser: state.home.tradeUser || {},
  orderSale: state.home.orderSale,
  order: state.home.order || {},
  saleData: state.home.saleData || {},
  murData: state.home.murData || {},
  mutData: state.home.mutData || {}
})
const mapDispatch = dispatch => ({
  getAllOrder: dispatch.home.getAllOrder,
  getGoods: dispatch.home.getGoods,
  getTradeUser: dispatch.home.getTradeUser,
  getOrderSale: dispatch.home.getOrderSale,
  getMut: dispatch.home.getMut,
  getMur: dispatch.home.getMur,
  getSaleData: dispatch.home.getSaleData,
  getOrder: dispatch.home.getOrder
})
const FormIndex = Form.create()(Index)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(FormIndex)
)
